<template>
  <view class="page">
    <!-- 背景图片 -->
    <image
        src="/static/bj-002.jpg"
        mode="aspectFill"
        class="bg-image">
    </image>

    <scroll-view class="scroll-container" scroll-y>
      <view class="white-box">
        <view class="title-container">
          <view class="back-container" @click="goBack">
            <image class="back-image" src="/static/images/fanhui.png"></image>
          </view>
          <text class="title">信息填写</text>
        </view>
        <view class="form-container">
          <!-- 姓名 -->
          <view class="form-row">
            <text class="field-name">姓名</text>
            <input
                class="form-input golden-border"
                placeholder="请输入姓名"
                maxlength="50"
                v-model="formData.name"
                :placeholder-style="placeholderStyle"
            />
          </view>

          <!-- 身份证号 -->
          <view class="form-row">
            <text class="field-name">身份证号</text>
            <input
                class="form-input golden-border"
                placeholder="18位身份证号码"
                maxlength="18"
                v-model="formData.idNumber"
                :placeholder-style="placeholderStyle"
            />
          </view>

          <!-- 通讯地址 -->
          <view class="form-row">
            <text class="field-name">通讯地址</text>
            <input
                class="form-input golden-border"
                placeholder="可选填"
                maxlength="200"
                v-model="formData.address"
                :placeholder-style="placeholderStyle"
            />
          </view>

          <!-- 就读学校 -->
          <view class="form-row">
            <text class="field-name">就读学校</text>
            <input
                class="form-input golden-border"
                placeholder="学校全称"
                maxlength="100"
                v-model="formData.school"
                :placeholder-style="placeholderStyle"
            />
          </view>

          <!-- 年级 -->
          <view class="form-row">
            <text class="field-name">年级</text>
            <picker
                class="form-input golden-border"
                mode="selector"
                maxlength="50"
                :range="gradeOptions"
                @change="gradeChange"
            >
              <text>{{formData.grade || '以2024年开学学籍为准'}}</text>
            </picker>
          </view>

          <!-- 组别（自动匹配） -->
          <view class="form-row">
            <text class="field-name">组别</text>
            <picker
                class="form-input golden-border"
                mode="selector"
                :range="matchedGroups"
                :disabled="!formData.grade"
                @change="groupChange"
            >
              <text>{{formData.competitionGroup || (formData.grade ? '请选择' : '请先选择年级')}}</text>
            </picker>
          </view>

          <!-- 指导老师 -->
          <view class="form-row">
            <text class="field-name">指导老师</text>
            <input
                class="form-input golden-border"
                placeholder="可选填"
                maxlength="50"
                v-model="formData.teacher"
                :placeholder-style="placeholderStyle"
            />
          </view>

          <!-- 作品尺寸 -->
          <view class="form-row">
            <text class="field-name">作品尺寸</text>
            <view class="size-inputs">
              <input
                  class="size-input golden-border"
                  placeholder="宽CM(选填)"
                  type="number"
                  maxlength="10"
                  v-model="formData.width"
                  :placeholder-style="placeholderStyle"
              />
              <input
                  class="size-input golden-border"
                  placeholder="高CM(选填)"
                  maxlength="10"
                  type="number"
                  v-model="formData.height"
                  :placeholder-style="placeholderStyle"
              />
            </view>
          </view>

          <!-- 作品类型 -->
          <view class="form-row">
            <text class="field-name">作品类型</text>
            <view class="checkbox-group">
              <!-- 分组显示单选框组 -->
              <view v-for="group in 4" :key="group" class="radio-group-row">
                <radio-group class="radio-group" @change="handleChange">
                  <label class="radio-label" v-for="item in typeOptions.filter(opt => opt.group === group)" :key="item.value">
                    <radio
                        :value="item.value"
                        :checked="formData.workType === item.value"
                        class="custom-radio"
                    />
                    <text class="radio-text">{{item.name}}</text>
                  </label>
                </radio-group>
              </view>
            </view>
          </view>

          <!-- 其他类型说明 -->
          <view class="form-row" v-if="showOtherInput">
            <text class="field-name">其他说明</text>
            <input
                class="form-input golden-border"
                placeholder="请输入作品类型说明"
                maxlength="200"
                v-model="formData.otherWorkType"
                :placeholder-style="placeholderStyle"
            />
          </view>

          <!-- 学生家长 -->
          <view class="form-row">
            <text class="field-name">学生家长</text>
            <input
                class="form-input golden-border"
                placeholder="家长姓名"
                maxlength="50"
                v-model="formData.parentName"
                :placeholder-style="placeholderStyle"
            />
          </view>

          <!-- 联系电话 -->
          <view class="form-row">
            <text class="field-name">联系电话</text>
            <input
                class="form-input golden-border"
                placeholder=""
                maxlength="11"
                type="number"
                v-model="formData.parentPhone"
                :placeholder-style="placeholderStyle"
            />
          </view>
          <!-- 帮助提示 -->
          <view class="help-box" v-if="showHelp">
            <view class="help-image-container">
              <image
                  src="/static/images/phone.png"
                  mode="aspectFit"
                  style="width: 100px; height: 60px;"
                  class="help-image"
              ></image>
            </view>
            <view class="help-text-container">
              <text class="help-text">如您在报名过程中遇到问题，</text>
              <text class="help-text">请联系小美老师，</text>
              <text class="help-text">联系电话：02157873028</text>
            </view>
            <text class="close-btn"  @click="closeHelp(false)">×</text>
          </view>
        </view>
      </view>
    </scroll-view>
    <view>
      <text class="next-btn" @click="goToNextPage">下一步</text>
      <image class="cloud-image"
          src="/static/images/yunduo.png"  ></image>
      <text class="help-class" @click="closeHelp(true)">帮助</text>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      showHelp: false,
      placeholderStyle: "color:#999; text-align:left;",
      formData: {
        name: '',
        idNumber: '',
        address: '',
        school: '',
        grade: '',
        competitionGroup: '',
        teacher: '',
        width: '',
        height: '',
        workType: '',
        otherWorkType: '',
        parentName: '',
        parentPhone: '',
        activityId: '',
      },
      gradeOptions: [
        '幼儿园中班', '幼儿园大班',
        '小学一年级', '小学二年级', '小学三年级', '小学四年级', '小学五年级',
        '初中六年级', '初中七年级', '初中八年级', '初中九年级',
        '高中一年级', '高中二年级', '高中三年级'
      ],
      groupMap: {
        '幼儿园中班': '幼儿园组',
        '幼儿园大班': '幼儿园组',
        '小学一年级': '小学A组',
        '小学二年级': '小学A组',
        '小学三年级': '小学B组',
        '小学四年级': '小学B组',
        '小学五年级': '小学B组',
        '初中六年级': '初中组',
        '初中七年级': '初中组',
        '初中八年级': '初中组',
        '初中九年级': '初中组',
        '高中一年级': '高中组',
        '高中二年级': '高中组',
        '高中三年级': '高中组'
      },
      typeOptions: [
        { name: '油画', value: '油画', group: 1 },
        { name: '中国画', value: '中国画', group: 1 },
        { name: '版画', value: '版画', group: 1 },
        { name: '水彩水粉画', value: '水彩水粉画', group: 2 },
        { name: '蜡笔画', value: '蜡笔画', group: 2 },
        { name: '动漫', value: '动漫', group: 2 },
        { name: '素描速写', value: '素描速写', group: 3 },
        { name: '线描', value: '线描', group: 3 },
        { name: '其他', value: '其他', group: 3 },
        { name: '数字创作(静态)', value: '数字创作(静态)', group: 4 },
        { name: '数字创作(动态)', value: '数字创作(动态)', group: 4 }
      ],
      currentValue: '' // 当前选中的value
    }
  },
  onLoad() {

  },
  computed: {
    showOtherInput() {
      // return this.formData.artTypes.includes('other')
    },
    matchedGroups() {
      if (!this.formData.grade) return []
      const competitionGroup = this.groupMap[this.formData.grade]
      return competitionGroup ? [competitionGroup] : []
    }
  },
  mounted() {
    this.getUrlParams()
  },
  methods: {
    closeHelp(flag) {
      this.showHelp = flag;
    },
    // 新增方法：获取URL参数
    getUrlParams() {
      const pages = getCurrentPages()
      const currentPage = pages[pages.length - 1]
      const options = currentPage.options
      if (options.activityId) {
        this.formData.activityId = decodeURIComponent(options.activityId)
      }
    },
    gradeChange(e) {
      this.formData.grade = this.gradeOptions[e.detail.value]
      // 自动匹配组别
      this.formData.competitionGroup = this.groupMap[this.formData.grade] || ''
    },
    groupChange(e) {
      this.formData.competitionGroup = this.matchedGroups[e.detail.value]
    },
    typeChange(e, value) {
      if (e.detail.value) {
        if (!this.formData.artTypes.includes(value)) {
          this.formData.artTypes.push(value)
        }
      } else {
        this.formData.artTypes = this.formData.artTypes.filter(item => item !== value)
        if (value === 'other') {
          this.formData.otherArtType = ''
        }
      }
    },
    goBack() {
      uni.navigateTo({
        url: `/pages/homePage?activityId=${encodeURIComponent(this.formData.activityId)}`
      })
    },
    // 选项变更处理
    handleChange(e) {
      this.formData.workType = e.detail.value
    },
    // 获取选中的标签文本
    getSelectedLabel() {
      const selected = this.options.find(item => item.value === this.formData.artType)
      return selected ? selected.label : '未选择'
    },
    goToNextPage() {
      // 基础验证
      if (!this.formData.name) {
        uni.showToast({ title: '请输入姓名', icon: 'none' })
        return
      }
      if (!/^\d{17}[\dXx]$/.test(this.formData.idNumber)) {
        uni.showToast({ title: '身份证格式错误', icon: 'none' })
        return
      }
      // if (!this.formData.address) {
      //   uni.showToast({ title: '请输入通讯地址', icon: 'none' })
      //   return
      // }
      if (!this.formData.school) {
        uni.showToast({ title: '请输入就读学校', icon: 'none' })
        return
      }
      if (!this.formData.grade) {
        uni.showToast({ title: '请选择年级', icon: 'none' })
        return
      }
      if (!this.formData.competitionGroup) {
        uni.showToast({ title: '请选择组别', icon: 'none' })
        return
      }
      // if (!this.formData.height || !this.formData.width) {
      //   uni.showToast({ title: '请输入作品尺寸', icon: 'none' })
      //   return
      // }
      if (!this.formData.parentPhone && !/^1[3-9]\d{9}$/.test(this.formData.parentPhone)) {
        uni.showToast({ title: '手机号格式错误', icon: 'none' })
        return
      }
      if (!this.formData.parentPhone) {
        uni.showToast({ title: '请输入联系电话', icon: 'none' })
        return
      }
      if (!this.formData.workType) {
        uni.showToast({ title: '作品类型必填', icon: 'none' })
        return
      }

      // 验证通过后跳转
      uni.navigateTo({
        url: '/pages/activity/upload_works',
        success: () => {
          uni.setStorageSync('formData', this.formData)
        }
      })
    }
  }
}
</script>

<style>
/* 基础样式 */
@font-face {
  font-family: 'minikt';
  src: url('@/static/font/minikt.TTF') format('truetype');
}
.page {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 让背景在底层 */
}

.scroll-container {
  position: relative;
  z-index: 1;
  height: 90vh;
  width: 100%;
  background-color: transparent;
}

.white-box {
  width: 90vw;
  max-width: 800px;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 30rpx;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 450rpx auto ;
}

.title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.back-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.title {
  color: #004AAC;
  font-size: 50rpx;
  font-weight: bold;
  font-family: 'minikt', sans-serif;
  text-align: center;
}

/* 表单行样式 */
.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.field-name {
  font-size: 30rpx;
  color: #333;
  width: 120rpx;
  text-align: justify;
  text-align-last: justify;
  margin-right: 10px;
  flex-shrink: 0;
}

/* 金色边框+白色背景输入框 */
.form-input, .size-input {
  flex: 1;
  height: 40px;
  border: 1px solid #3667AA;
  border-radius: 20rpx;
  padding: 0 12px;
  font-size: 14px;
  min-width: 0;
  background-color: white;
  transition: all 0.3s;
}

.form-input:focus, .size-input:focus {
  border-color: #3667AA;
  box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

/* 选择器样式 */
picker.form-input {
  display: flex;
  align-items: center;
  color: #999;
}

/* 作品尺寸特殊样式 */
.size-inputs {
  flex: 1;
  display: flex;
  align-items: center;
}

.size-input {
  width: 80px;
  margin-right: 5px;
}

/* 多选框组样式 */
.checkbox-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}

checkbox {
  transform: scale(0.8);
  margin-right: 5px;
}



.radio-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.radio-label {
  display: flex;
  align-items: center;
}

.custom-radio {
  transform: scale(0.6); /* 缩小 radio 圆圈的大小 */
}

.radio-text {
  font-size: 26rpx;
  color: #333;
}
.help-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 400px;
  text-align: center;
  border: 1px solid #B8860B;
}

.help-image-container {
  display: flex;
  justify-content: center;
  margin-bottom: 10rpx;
}

.help-text-container {
  text-align: center;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  color: #D4AF37;
  font-size: 16px;
  height: 30px;
  width: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.help-image {
  opacity: 0.8; /* 设置图片透明度 */
}

/* 修改“下一步”按钮和白云图片的层级关系 */
.next-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3; /* 确保按钮在上层 */
  color: #004AAC;
  font-size: 50rpx;
  font-weight: bold;
  font-family: 'minikt', sans-serif;
  text-align: center;
  display: block;
  padding: 10px 20px;
  border-radius: 10px;
}

.cloud-image {
  position: absolute;
  bottom: -45rpx;
  left: 50%;
  transform: translateX(-48%);
  width: 360rpx; /* 调整宽度为600rpx */
  height: 250rpx;
  z-index: 2; /* 确保图片在下层 */
  opacity: 1; /* 添加透明度，使白云图案与背景图融合 */
}


.back-image {
  width: 500rpx;
  height: 70rpx;
  margin-left: -280rpx; /* 调整图片和文字之间的间距 */
}

.help-class {
  position: absolute;
  bottom: 20rpx;
  left: 10%;
  transform: translateX(-50%);
  z-index: 3;
  color: #ffffff;
  font-size: 40rpx;
  font-weight: bold;
  font-family: 'minikt', sans-serif;
  text-align: center;
  display: block;
  border-radius: 10px;
  opacity: 0.8;
  text-decoration: underline;
}
</style>